import { ref } from 'vue'

interface ChessTheme {
  name: string
  lightSquare: string
  darkSquare: string
  highlight: string
  validMove: string
  check: string
  selected: string
  lastMove: string
}

export function useChessTheme() {
  const themes: Record<string, ChessTheme> = {
    classic: {
      name: '经典',
      lightSquare: '#ffffff',
      darkSquare: '#b58863',
      highlight: 'rgba(255, 255, 0, 0.3)',
      validMove: 'rgba(0, 255, 0, 0.2)',
      check: 'rgba(255, 0, 0, 0.3)',
      selected: 'rgba(0, 0, 255, 0.2)',
      lastMove: 'rgba(255, 255, 0, 0.2)'
    },
    modern: {
      name: '现代',
      lightSquare: '#eeeed2',
      darkSquare: '#769656',
      highlight: 'rgba(155, 199, 0, 0.41)',
      validMove: 'rgba(20, 85, 30, 0.5)',
      check: 'rgba(255, 0, 0, 0.4)',
      selected: 'rgba(0, 0, 255, 0.3)',
      lastMove: 'rgba(155, 199, 0, 0.3)'
    },
    blue: {
      name: '蓝色',
      lightSquare: '#dee3e6',
      darkSquare: '#8ca2ad',
      highlight: 'rgba(0, 90, 255, 0.3)',
      validMove: 'rgba(0, 45, 255, 0.2)',
      check: 'rgba(255, 0, 0, 0.3)',
      selected: 'rgba(0, 0, 255, 0.2)',
      lastMove: 'rgba(0, 90, 255, 0.2)'
    }
  }

  const currentTheme = ref<string>('classic')

  const setTheme = (themeName: string) => {
    if (themes[themeName]) {
      currentTheme.value = themeName
      applyTheme(themes[themeName])
    }
  }

  const applyTheme = (theme: ChessTheme) => {
    const root = document.documentElement
    root.style.setProperty('--chess-light-square', theme.lightSquare)
    root.style.setProperty('--chess-dark-square', theme.darkSquare)
    root.style.setProperty('--chess-highlight', theme.highlight)
    root.style.setProperty('--chess-valid-move', theme.validMove)
    root.style.setProperty('--chess-check', theme.check)
    root.style.setProperty('--chess-selected', theme.selected)
    root.style.setProperty('--chess-last-move', theme.lastMove)
  }

  const getThemes = () => themes

  return {
    currentTheme,
    setTheme,
    getThemes
  }
} 